body {
  background-color: white;
  color: black;
  .qb-demo-pre {
    background-color: darkgrey;
    margin: 10px;
    padding: 10px;
  }
  .qb-demo-error-pre {
    background-color: lightpink;
    margin: 10px;
    padding: 10px;
  }
  .qb-demo-warning-pre {
    background-color: lightyellow;
    margin: 10px;
    padding: 10px;
  }
}

$inputs: select, input, button;

body[data-theme="dark"] {
  background-color: rgb(15, 18, 20);
  color: #a6adbb;
  @each $input in $inputs {
    #root #{$input}:not(.query-builder #{$input}) {
      border-color: rgb(15, 18, 20);
      background-color: rgb(15, 18, 20);
      color: #a6adbb;
      outline: none;
    }
  }
  .qb-demo-pre {
    background-color: oklch(0.313815 0.021108 254.139);
    color: #a6adbb;
  }
  .qb-demo-error-pre {
    background-color: rgb(92, 54, 60);
    color: #a6adbb;
  }
  .qb-demo-warning-pre {
    background-color: rgb(113, 86, 64);
    color: #a6adbb;
  }
}

.query-builder {
  // overrides:
  //--item-radius: 8px;
}
